<template>
  <view class="goods-list">
<!--    <view v-for="(item, i) in goodsList"  :key="i" @click="gotoGoodsDetail(item)">
      <my-goods :goods="item" ></my-goods>
    </view> -->
    <my-goods v-for="(item, i) in goodsList" :key="i" :goods="item" @xxx="gotoGoodsDetail(item)"></my-goods>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 页面状态数据
        isLoading: false, // 页面数据是否请求完成
        
        // ==================
        // 请求查询参数
        queryObj: {
          query: '', //列表查询参数
          cid: '', // 商品分类id
          pagenum: 1, // 商品页码
          pagesize: 10, //每页数据
        },
        // 商品列表
        goodsList: [], // 商品列表
        total: 0, // 页面插叙条件数据总数
        
      };
    },
    onLoad(options) {
      console.log(options)
      // 初始化页面查询参数
      this.queryObj.query = options.query || ''
      this.queryObj.cid = options.cid || ''
      // 获取商品列表数据
      this.getGoodsList()
    },
    
    onPullDownRefresh() {
      console.log('下拉刷新')
      // 重置页面请求参数
      this.isLoading = false
      this.queryObj.pagenum = 1
      this.queryObj.pagesize = 10
      this.goodsList = []
      this.total = 0
      // 发起请求
      this.getGoodsList(()=> {
        uni.stopPullDownRefresh()
        // 等等其它事情
        console.log('产品经理来啦')
      })
    },
    
    onReachBottom() {
      
      console.log('到底了')
      // 判断上次请求数据是否返回
      if(this.isLoading) return
      
      // 判断当前查询条件数据是否请求完毕
      // if(this.total === this.goodsList.length) return uni.$showMsg('数据请求完毕')
      if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕！')
      
      console.log('到底了，请求数据')
      // 修改请求参数
      this.queryObj.pagenum += 1
      // this.queryObj.pagenum = this.queryObj.pagenum + 1
      // 发起请求
      this.getGoodsList()
      
      
    },
    
    methods: {
      // 获取商品列表数据
      async getGoodsList(cb) {
        try{
          // 设置数据请求状态
          this.isLoading = true
          // 发起请求
          const { data: res } = await uni.$http.get('/goods/search', this.queryObj)
          // 设置数据请求状态
          this.isLoading = false
          // 停止下拉刷新效果
          cb && cb()
          
          console.log(res)
          // 异常数据判断
          if(res.meta.status !== 200) return uni.$showMsg()
          // 设置页面数据
          this.goodsList = [...this.goodsList, ...res.message.goods]
          this.total = res.message.total
        }catch(err){
          console.log(err)
          // 设置数据请求状态
          this.isLoading = false
        }
      },
      // 点击商品列表页跳转到商品详情页
      gotoGoodsDetail(item){
        console.log(item)
        uni.navigateTo({
          url: `/subpkg/goods_detail/goods_detail?goods_id=${item.goods_id}`
        })
      }
      
      
      
    }
  }
</script>

<style lang="scss">
  .goods-list {
      border: 1rpx solid #efefef;
      margin: 0 8rpx;
  }
</style>
